<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <tr>
            <td>
                <el-form-item label="计划编码">
                    <el-input v-model="form.planningCode" />
                </el-form-item>
            </td>
            <td>
                <el-form-item label="计划名称">
                    <el-input v-model="form.planningName" />
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>
                <el-form-item label="计划描述">
                    <el-input v-model="form.planningDesc" />
                </el-form-item>
            </td>
            <td>
                <el-form-item label="状态">
                    <el-select v-model="form.planningState" placeholder="请选择">
                        <el-option label="新建" :value=true />
                    </el-select>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>
                <el-form-item label="制单人">
                    <el-input v-model="form.planningPeole" />
                </el-form-item>
            </td>
            <td>
                <el-form-item label="制单部门">
                    <el-select v-model="form.departmentId" placeholder="请选择">
                        <el-option label="JAVA组" value=1 />
                    </el-select>
                </el-form-item>
            </td>
        </tr>
        <el-button type="success" @click="add">保存</el-button>
    </el-form>
    <!-- 弹框新增 -->
    <el-button @click="Zeng()">新增计划行</el-button>

    <el-dialog v-model="form.dialogFormVisible" title="物料需求计划编辑" width="500">
        <el-form :model="form">
            <el-form-item label="物料选择">
                <el-select v-model="formm.chooseId" placeholder="请选择">
                    <el-option v-for="a in inventoryInfo" :label="a.chooseName" :value="a.chooseId"
                        @click="getspec(), getunit()" />
                </el-select>
            </el-form-item>
            <el-form-item label="物料属性">
                <el-select v-model="formm.attributeRowId" placeholder="请选择">
                    <el-option label="自制" :value=1 />
                    <el-option label="采购" :value=2 />
                    <el-option label="委外" :value=3 />
                </el-select>
            </el-form-item>
            <el-form-item label="单位">
                <el-input v-model="formm.unitName" disabled />
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="formm.spec" disabled />
            </el-form-item>
            <el-form-item label="计划数量">
                <el-input v-model="formm.planningNum" />
            </el-form-item>

            <el-form-item label="计划开始日期">
                <el-col :span="11">
                    <el-date-picker v-model="formm.planningStartDate" type="date" placeholder="Pick a date"
                        style="width: 100%" />
                </el-col>
            </el-form-item>
            <el-form-item label="计划结束日期">
                <el-col :span="11">
                    <el-date-picker v-model="formm.planningEndDate" type="date" placeholder="Pick a date"
                        style="width: 100%" />
                </el-col>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="formm.markment" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="ti()">保存</el-button>
                <el-button @click="jiao()">提交</el-button>
            </div>
        </template>
    </el-dialog>

    <el-table :data="list" style="width: 100%">
        <el-table-column prop="planningRow" label="行号" />
        <el-table-column prop="chooseId" label="物料名称">
            <template v-slot="scope">
                <span v-if="scope.row.chooseId == 1">棉花</span>
                <span v-else>羊皮</span>
            </template>
        </el-table-column>
        <el-table-column prop="unitName" label="单位" />
        <el-table-column prop="spec" label="规格" />
        <el-table-column prop="attributeRowId" label="物料属性">
            <template v-slot="scope">
                <span v-if="scope.row.attributeRowId == 1">自制</span>
                <span v-else-if="scope.row.attributeRowId == 2">采购</span>
                <span v-else>委外</span>
            </template>
        </el-table-column>
        <el-table-column prop="planningNum" label="计划数量" />
        <el-table-column prop="planningNum" label="实际需求数量" />
        <!-- <el-table-column prop="address" label="库存量">
            
        </el-table-column>
        <el-table-column prop="date" label="预计接收量" /> -->
        <el-table-column prop="planningStartDate" label="计划开工日期">
            <template v-slot="scope">
                {{ scope.row.planningStartDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="planningEndDate" label="计划完工日期">
            <template v-slot="scope">
                {{ scope.row.planningEndDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="pid" label="下达状态">
            <template v-slot="scope">
                <span v-if="scope.row.pid == 1">开始</span>
                <span v-else>结束</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template v-slot="scope">
                <el-button>删除</el-button>
                <el-button>编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'
const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
const router = useRouter()
const form = reactive({
    dialogFormVisible: false,
    materialPlanningId: 0,
    planningCode: "",
    planningName: "",
    planningDesc: "",
    planningState: true,
    planningPeole: "Admin",
    departmentId: "",
    handle: "Admin",
    handleContext: "新增",
    handleTime: "",
    pid: 1,
    isDelete: false
});
const formm = reactive({
    planningRow: 0,
    chooseId: 0,
    attributeRowId: 0,
    unitName: "",
    spec: "",
    planningNum: 0,
    planningStartDate: "",
    planningEndDate: "",
    markment: "",
    handle: "MaxAdmin",
    handleContext: "新增",
    handleTime: "",
    pid: 1,
    isDelete: true
})
const jiao = () => {
    router.push({ name: 'MaterialPlanningList' })
}
//弹框新增
const ti = () => {
    axios.post(apiurls + '/api/Material/AddRowMaterialPlanning', {
        planningRow: formm.planningRow,
        chooseId: formm.chooseId,
        attributeRowId: formm.attributeRowId,
        unitName: formm.unitName,
        spec: formm.spec,
        planningNum: formm.planningNum,
        planningStartDate: formm.planningStartDate,
        planningEndDate: formm.planningEndDate,
        markment: formm.markment,
        IsDelete: false,
        handle: formm.handle,
        handleContext: formm.handleContext,
        handleTime: new Date(),
        pid: 1
    }).then(res => {
        if (res.data.code > 0) {
            console.log(res.data)
            ElMessage.success("添加成功")
            form.dialogFormVisible = false
            getlist()
        } else {
            console.log(res.data)
            ElMessage.error("添加失败")
        }
    })
}
//行显示
const list = ref([])
const getlist = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetRowMaterialPlanning', {

    }).then(res => {
        console.log(res.data)
        list.value = res.data.data

    })
}
//物料选择下拉框
const inventoryInfo = ref([])
const getinventoryInfo = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetSelection', {}).then(res => {
        inventoryInfo.value = res.data.data
    })
}
//单位反填
const getunit = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetItemUnit', {
        chooseId: formm.chooseId
    }).then(res => {
        formm.unitName = res.data.data.itemUnitName
    })
}
//规格反填
const getspec = () => {
    axios.post(apiurl + '/api/ShowMaterial/GetSpecs', {
        chooseId: formm.chooseId
    }).then(res => {
        formm.spec = res.data.data.materialSpecsName
    })
}
//物料属性返填
// const getattr = () => {
//     axios.post("http://localhost:5195/api/ShowMaterial/GetAttributeRow", {
//         chooseId: formm.chooseId
//     }).then(res => {
//         if (res.data.code > 0) {
//             formm.rowAttribute = res.data.data.rowAttribute
//         }

//     })
// }
//新增弹框设置
const Zeng = () => {
    form.dialogFormVisible = true
}
//添加物料需求计划
const add = () => {
    axios.post(apiurls + '/api/Material/AddMaterialPlanning', {
        materialPlanningId: 0,
        planningCode: form.planningCode,
        planningName: form.planningName,
        planningDesc: form.planningDesc,
        planningState: true,
        planningPeole: form.planningPeole,
        departmentId: form.departmentId,
        IsDelete: false,
        handle: form.handle,
        handleContext: form.handleContext,
        handleTime: new Date(),
        pid: form.pid
    }).then(res => {
        if (res.data.code > 0) {
            console.log(res.data)
            ElMessage.success("添加成功")
            // router.push({ name: 'MaterialPlanningList' })
        } else {
            console.log(res.data)
            ElMessage.error("添加失败")
        }
    })
}
onMounted(() => {

    getinventoryInfo()
})
</script>